<script>
import axios from "axios";
import instance from "@/api/axios";
import {getCourseList} from "@/api/http";

export default {
  name: "axiosPage",
  data() {
    return {
      imgSrc: '',
      imgList: [],
      courseList: [],
      courseBoutiqueList: [],
      courseParameters: {
        type: 'free',
        pageSize: 5,
        pageNum: 1
      }
    }
  },
  methods: {
    getList(type) {
      return axios.post('https://showme2.myhope365.com/online_course/weChat/applet/course/list/type', {
        type,
        pageNum: 1,
        pageSize: 5
      }, {
        headers: {'content-type': 'application/x-www-form-urlencoded'}
      })
    },

    getList1() {
      getCourseList(this.courseParameters).then(res => {
        console.log(res)
      })
    }


  },
  created() {
    this.getList1()
    console.log(instance)
    console.log()
    instance.get('/weChat/applet/course/banner/list?number=3').then(res => {
      console.log(res)
    })
    // console.dir(axios)
    // 参数url地址：协议（http https） + 主机 （域名  ip(公网ip 私网ip)） + 端口号 + 路径 + 参数
    axios.get('https://showme2.myhope365.com/online_course/weChat/applet/course/banner/list?number=3').then(res => {
      console.log(res)
      this.imgSrc = res.data.data[0].imgUrl
      this.imgList = res.data.data
    }).catch((error) => {
      console.log(error)
    })


    console.log()
    this.getList('free').then(res => {
      if (res.data.code === 0) {
        this.courseList = res.data.rows
      }
    })
    this.getList('boutique').then(res => {
      if (res.data.code === 0) {
        this.courseBoutiqueList = res.data.rows
      }
    })

    instance.post('https://showme2.myhope365.com/online_course/weChat/applet/course/list/type', {
      type: 'free',
      pageNum: 1,
      pageSize: 5
    }).then(res => {
      console.log(res)
    })
  }
}
</script>

<template>
  <div>
    <div class="box">
      <div class="course" v-for="item in courseList " :key="item.courseId">
        <img :src="item.coverFileUrl" alt="">
        <div>{{ item.courseTitle }}</div>
        <div>{{ item.learningNum }}人学习</div>
        <div>免费</div>
      </div>
    </div>

    <div class="box">
      <div class="course" v-for="item in courseBoutiqueList" :key="item.courseId">
        <img :src="item.coverFileUrl" alt="">
        <div>{{ item.courseTitle }}</div>
        <div>{{ item.learningNum }}人学习</div>
        <div v-if="item.isFree==='1'">
          免费
        </div>
        <div v-else-if="item.isDiscount==='1'">
          {{ item.discountPrice }}
          <del>{{ item.coursePrice }}</del>
        </div>
        <div v-else>
          {{ item.coursePrice }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.box {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;

  .course {
    width: 19%;

    img {
      width: 100%;
    }
  }

}
</style>